Design System
Analysis of Readymag

A confident, image-forward editorial system — a clean white canvas, a near-black ink ramp, neutral Graphik type set tight, and one hot orange that does all the shouting from full-pill CTAs.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Brand face is Graphik, a neutral neo-grotesque, shown here in its nearest Google substitute, Inter. Hierarchy comes from size and tight tracking, not weight — display lines run at a regular 400 with an aggressive −2px letter-spacing.

03 — Components

Button Variants

button-primary
The one action that gets colour. Hot orange (#ec520b) fill, white text, full-pill radius. Used sparingly so it always reads as "click here."
button-dark
Near-black (#141414) fill for high-contrast secondary actions and inverted bands.
button-secondary
Soft grey (#f4f4f4) fill, ink text, same full-pill shape — the quieter twin of the primary CTA.
button-pill · utility
12px label, hairline border, white fill — used for small utility controls like consent and filters.
04 — Components

Cards & Surfaces

Readymag's surfaces are the member projects themselves — full-bleed, square-ish tiles on a 12px radius. Separation is colour and hairline, not shadow.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A roughly 8px base unit drives the rhythm — though as a canvas builder, Readymag also uses fine absolute positioning in its own hero.

07 — Foundations

Border Radius

A 12px radius dominates surfaces, with a tighter 6–10px tier for inputs and chips, scaling all the way to ~200px pills for CTAs.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The site's resting state: extraction found essentially no box-shadows.
Level 1 — a barely-there 1px lift, used at most as a hover affordance on tiles.
Level 2 — a soft 24px-blur shadow reserved for overlays like the cookie/consent dialog.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxProject grids collapse to one column; display type drops to ~48px; pill CTAs stack full-width.
Tablet768–1023pxShowcase grids go to two columns; hero type scales down; nav condenses.
Laptop1024–1279pxFour-up project grid returns; full editorial spacing restored.
Desktop≥ 1280pxMax 1200px content column, full-bleed image bands break the grid.

Across every width the recipe holds: white canvas, tight neutral type, one orange accent, no shadows.

Pricing Tiers

Readymag publishes subscription plans; tiers below are brand-appropriate sample content rendered in the extracted system.

Free
$0/mo
Build and publish one project on a Readymag subdomain.
  • 1 project
  • Readymag domain
  • Core widgets
  • Community templates
Pro● Most popular
$15/mo
Custom domains and unlimited projects for working designers.
  • Unlimited projects
  • Custom domain
  • Remove Readymag badge
  • Fonts & analytics
Team
$45/mo
Shared workspaces and collaboration for studios.
  • Everything in Pro
  • Shared workspace
  • Multiple seats
  • Priority support

Data Table

A dashboard-style table rendered in the extracted tokens — hairline rows, pill status chips, soft-grey header.

IDProjectAuthorStatusWhen
#4021Aurora PortfolioL. MarencoPublished2h ago
#4019Field Notes ZineK. OseiDraftYesterday
#4015Studio Reel 2026R. HaddadPublished2 days ago
#4008Type SpecimenM. VogelDraft4 days ago
#4001Coastal LookbookS. ParkPublished1 week ago
1–5 of 412
123

Auth Forms

Sign-in and create-account patterns built from the input, button, and divider tokens.

Sign in

Welcome back

OR
Create account

Start designing

OR